<template>
  <div>
    <el-dialog :title='title' :visible="showDialog" width="50%" :before-close="handleClose"
      :close-on-click-modal="false">
      <div class="content">
        <div class="header">
          <div class="text">
            <span class="title">生产队</span>
            <span class="name">{{ teamName }}</span>
          </div>
          <div class="text">
            <span class="title">上报人</span>
            <span class="name">{{ user }}</span>
          </div>
        </div>
        <div class="operate-box" v-if="title == '新增'">
          <div class="button-box">
            <el-button class="addButton" type="primary" icon="el-icon-plus" size="mini" style="margin-right: 10px;"
              @click="handleShowAddDialog">新增</el-button>
            <el-popconfirm confirm-button-text='确定' cancel-button-text='取消' icon="el-icon-info" icon-color="red"
              title="确定删除所勾选的数据吗？" @confirm="handleDel">
              <el-button slot="reference" type="danger" plain icon="el-icon-delete" size="mini">删除</el-button>
            </el-popconfirm>
            <el-button type="info" plain icon="el-icon-upload2" size="mini" style="margin-left: 10px;"
              @click="handleSelectAll">全选</el-button>
          </div>
        </div>
        <div class="table-box" v-if="title != '查看'">
          <TableCom ref="tableCom" :tableHead="tableHead" :tableData="tableData" :delList.sync="delList"
            :tableOperate="tableOperate">
          </TableCom>
        </div>
        <div class="table-box" v-if="title == '查看'">
          <TableCom ref="tableCom" :tableHead="tableHead" :tableData="tableData" :showSelect="false">
          </TableCom>
        </div>
        <template v-if="title != '新增'">
          <div class="text-box">
            <div class="left-text">审批结果</div>
            <div class="right-text"> {{ status }} </div>
          </div>
          <div class="text-box">
            <div class="left-text">审批说明</div>
            <div class="right-text">
              <el-input type="textarea" :disabled="true" :autosize="{ minRows: 2, maxRows: 4 }" placeholder=""
                v-model="description">
              </el-input>
            </div>
          </div>
          <div class="text-box" v-if="title != '查看'">
            <div class="left-text"></div>
            <div class="right-text" style="color: #f00;">
              预扣额度调整后，该作物本自然年的统计数据会重新计算
            </div>
          </div>
        </template>
      </div>
      <span slot="footer" class="dialog2-footer">
        <el-button class="cancel" size="small" @click="handleClose">取 消</el-button>
        <div>
          <el-button v-if="title == '修改'" class="addButton" type="primary" @click="handleSubmit('2')">保
            存</el-button>
          <el-button v-if="title != '查看'" class="addButton" type="primary" @click="handleSubmit('1')">上 报</el-button>
        </div>
      </span>
    </el-dialog>

    <ReportPopu ref="ReportPopu" :showDialog.sync="showReportPopu" @submit="handleGetnw"></ReportPopu>
  </div>
</template>

<script>
import '../scss/style.scss'
import { getUserKey } from '@/utils/auth'
import { selectApi } from '@/api/select'
import { getnwApi, addApi, viewApi, updateApi } from '@/api/limit'
import TableCom from '@/components/TableCom'
import ReportPopu from './ReportPopu'
import { Message } from 'element-ui'
export default {
  props: ['showDialog'],
  components: {
    TableCom,
    ReportPopu
  },
  data() {
    return {
      title: '',
      teamName: '',
      user: "",
      status: '',
      description: '',
      id: '',
      tableHead: [{
        title: '粮食种类',
        prop: 'cropType'
      }, {
        title: '年份',
        prop: 'year'
      }, {
        title: '净重(kg)',
        prop: 'nw'
      }, {
        title: '预扣额度(%)',
        prop: 'lines'
      }, {
        title: '实重(kg)',
        prop: 'solid'
      }, {
        title: '出库重(kg)',
        prop: 'out'
      }],
      tableData: [],
      tableOperate: [{
        title: '修改',
        handle: (row) => {
          this.$refs.ReportPopu.handleGetSelect()
          this.$refs.ReportPopu.ruleForm = { ...row }
          this.showReportPopu = true
        },
        flag: () => {
          return true
        }
      }],
      delList: [],
      showReportPopu: false,
    };
  },
  methods: {
    handleClose() {
      this.$emit('update:showDialog', false)
      this.tableData = []
    },
    async handleSubmit(type) {
      if (this.title == '修改') {
        let { code } = await updateApi({ id: this.id, linesTwos: this.tableData, type: type, year: new Date().getFullYear() })
        if (code == 0) {
          this.$message({
            message: '修改成功',
            type: 'success'
          });
        }
      } else {
        let { code } = await addApi({ linesTwos: this.tableData, year: new Date().getFullYear() })
        if (code == 0) {
          this.$message({
            message: '上报成功',
            type: 'success'
          });
        }
      }
      this.$emit('handleRefresh')
      this.handleClose()
    },
    // 获取填报人时间
    async handleGetInfo() {
      let res = await selectApi({ type: this.$farmCode })
      this.teamName = res.data.dictItemList.find(item => item.value == this.$teamCode).label
      this.user = getUserKey()
    },
    // 修改 查看 获取表格
    async handleGetList(id) {
      let res = await viewApi(id)
      this.tableData = res.data
    },
    // 全选取消全选
    handleSelectAll() {
      this.$refs.tableCom.toggleSelection(this.tableData)
    },
    handleShowAddDialog() {
      this.$refs.ReportPopu.handleGetSelect()
      this.showReportPopu = true
    },
    // 删除
    async handleDel() {
      if (!this.delList.length) return
      this.delList.forEach(id => {
        const i = this.tableData.findIndex(item => item.id == id)
        this.tableData.splice(i, 1)
      })
    },
    // 新增内联表
    async handleGetnw(val) {
      let res = await getnwApi(val.cropType, this.$farmCode, this.$teamCode, val.year)
      if (val.id) {
        const i = this.tableData.findIndex(item => item.id == val.id)
        const list = this.tableData.filter(item => item.id != val.id)
        const n = list.findIndex(item => item.cropType == val.cropType)
        if (n > -1) {
          Message({
            message: '该作物已存在',
            type: 'error',
            duration: 5 * 1000
          })
          return
        } else {
          let obj = {
            cropType: val.cropType,
            nw: res.data || 0,
            lines: val.lines,
            solid: (res.data * (100 - val.lines)) / 100,
            year: val.year,
            id: val.id
          }
          this.tableData.splice(i, 1, { ...obj })
        }
      } else {
        let obj = {
          cropType: val.cropType,
          nw: res.data || 0,
          lines: val.lines,
          solid: (res.data * (100 - val.lines)) / 100,
          year: val.year,
          id: new Date().getTime()
        }
        const i = this.tableData.findIndex(item => item.cropType == obj.cropType)
        if (i > -1) {
          Message({
            message: '该作物已存在',
            type: 'error',
            duration: 5 * 1000
          })
          return
        }
        this.tableData.push({ ...obj })
      }
      if (res.data == null) {
        Message({
          message: '当前作物暂无净重',
          type: 'warning',
          duration: 5 * 1000
        })
      }
      this.$refs.ReportPopu.handleClose()
    },
  }
}
</script>

<style lang='scss' scoped>
.content {
  width: 100%;
  height: 500px;
  overflow-y: auto;
  margin-bottom: 20px;
  border: 1px solid rgb(238, 238, 238);

  .header {
    display: flex;
    align-items: center;
    height: 36px;

    .text {
      width: 50%;
      color: #606266;

      .title {
        display: inline-block;
        width: 90px;
        text-align: center;
        font-size: 15px;
        font-weight: 700;
        color: #606266 !important;
      }

      .name {
        font-size: 14px;
      }
    }
  }

  .operate-box {
    width: 100%;
    background-color: #f5f7fa;
    padding: 8px 5px;
    box-sizing: border-box;
  }

  .table-box {
    min-height: 200px;
  }

  .text-box {
    display: flex;
    line-height: 40px;

    .left-text {
      width: 20%;
      text-align: center;
    }

    .right-text {
      flex: 1
    }
  }
}

.dialog2-footer {
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0 20px;
}

.cancel {

  border-radius: 5px;
  position: relative;
  line-height: 20px;
  text-align: center;
  font-size: 14px;

  &:hover,
  &:focus {
    background: rgba($color: #e8f4ff, $alpha: 1) !important;
    border: 1px solid #0e7b67 !important;
    color: #0e7b67 !important;
  }

}
</style>
